<template>
  <div class="main-content-container">
    <Tabs v-model="tabsVal" :data="tabsName" style="width: 50%;float: left;position: relative;z-index: 100;" @change="handleClick" />
    <Hospital v-if="tabsVal===1" />
    <Dept v-if="tabsVal===2" />
    <Station v-if="tabsVal===3" />
    <Role v-if="tabsVal === 4" />
  </div>
</template>
<script>
import Tabs from "@/components/SearchSelection";
import Dept from "./dept";
import Hospital from "./hospital";
import Station from "./station";
import Role from "./role";
import "@/assets/styles/common.scss";
export default {
  components: {
    Station,
    Hospital,
    Dept,
    Tabs,
    Role,
  },
  data() {
    return {
      tabsName: [
        { id: 1, name: "医院" },
        { id: 2, name: "部门" },
        { id: 3, name: "岗位" },
        { id: 4, name: "角色" },
      ],
      tabsVal: 1,
    };
  },
  methods: {
    handleClick(tab) {
      console.log(tab);
      this.tabsVal = tab;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
